<!DOCTYPE html>
<html>

<head>
    <title>Monaco Editor Demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script src="./monaco-editor/min/vs/loader.js"></script>

    <style>
        body {
            font-family: "Source Han Sans", "San Francisco", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
            transition: background-color .2s;
        }

        .container {
            position: fixed;
            left: 0;
            height: 100%;
            right: 0;

            margin: 0 auto;
            display: block;

            transition: 0.2s;
            overflow: hidden;
            z-index: 0;
        }


    </style>

    <script type="text/javascript">

        var edit_content = "";

        require.config({paths: {'vs': './monaco-editor/min/vs'}});
        require(['vs/editor/editor.main'], function () {

            var defaultCode = [
                edit_content
            ].join('\n');

            // 定义编辑器主题
            monaco.editor.defineTheme('myTheme', {
                base: 'vs',
                inherit: true,
                rules: [{background: 'EDF9FA'}],
            });
            monaco.editor.setTheme('myTheme');
            addNewEditor(defaultCode, 'java');
        });

        var code_edit;

        // 新建一个编辑器
        function newEditor(container_id, code, language) {
            var model = monaco.editor.createModel(code, language);
            var editor = monaco.editor.create(document.getElementById(container_id), {
                model: model,
                automaticLayout: true,
                tabSize: 4,
                minimap: {
                    enabled: false, // 不要小地图
                },
                fontSize: 18,
                lineNumbers: true,
                scrollbar: {
                    // Subtle shadows to the left & top. Defaults to true.
                    useShadows: true,

                    // Render vertical arrows. Defaults to false.
                    verticalHasArrows: true,
                    // Render horizontal arrows. Defaults to false.
                    horizontalHasArrows: true,

                    // Render vertical scrollbar.
                    // Accepted values: 'auto', 'visible', 'hidden'.
                    // Defaults to 'auto'
                    vertical: 'auto',
                    // Render horizontal scrollbar.
                    // Accepted values: 'auto', 'visible', 'hidden'.
                    // Defaults to 'auto'
                    horizontal: 'auto',
                    verticalScrollbarSize: 10,
                    horizontalScrollbarSize: 10,
                    arrowSize: 30,
                    alwaysConsumeMouseWheel: false
                }

            });
            editor.onDidChangeCursorPosition((e) => {
                edit_content = editor.getValue();
                window.text_code.setValue(edit_content)
            });
            code_edit = editor;
            return editor;
        }

        // 新建一个 div
        function addNewEditor(code, language) {
            var new_container = document.getElementById("root")
            new_container.className = "container";
            newEditor(new_container.id, code, language);
        }

        //设置语言
        function setModelLanguage(language) {
            monaco.editor.setModelLanguage(window.monaco.editor.getModels()[0], language)
        }

        //获取值
        function getValue() {

        }

        //添加或取消注释
        function commentLine(){
            getActionToTrigger("editor.action.commentLine")
        }

        function setThem() {
            monaco.editor.setTheme('vs-dark');
        }

        //获取所选文本
        function getSelected() {
            return code_edit.getModel().getValueInRange(code_edit.getSelection())
        }

        //删除所选文本
        function removeSelectText(){
            // 触发查找操作
            getActionToTrigger('editor.action.deleteLines')
        }

        function getActionToTrigger(id){
            code_edit.getAction(id).run().then(() => {
                console.log('运行成功')
            })
        }

        function setValue(content){
            // 销毁当前的编辑器实例
            code_edit.dispose();
            addNewEditor(content, 'java');
        }

        function setFont(){
            code_edit.updateOptions({
                fontSize:30
            })
        }

    </script>
</head>

<body>
<div id="root"></div>

</body>

</html>